<template>
  <div class="icon-nav">
    <!-- 可滑动的导航区域 -->
    <div class="nav-scroll" ref="scrollRef">
      <div class="nav-items" ref="itemsRef">
        <div
            v-for="(item, index) in navList"
            :key="index"
            class="nav-item"
            @click="goTo(index)"
        >
          <img :src="item.icon" alt="功能图标" class="icon" />
          <p class="label">{{ item.label }}</p>
        </div>
      </div>
    </div>

    <!-- 底部导航指示器 -->
    <div class="indicator">
      <span
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: currentIndex === index }"
          @click="goTo(index)"
      ></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue';

// 导航数据（替换为实际图标路径，示例使用public/icons目录）
const navList = reactive([
  {
    label: '简历认证',
    icon: 'http://localhost:80/qunar/personalcenter/Z~_W%25%5DG2DWPX2%5DTK%29%40%60%25B%24A.png'
  },
  {
    label: '淘宝转卖',
    icon: 'http://localhost:80/qunar/personalcenter/0EK9A1W13Q%7B%25RB8%7E0MBWG%7D9.png'
  },
  {
    label: '借钱',
    icon: 'http://localhost:80/qunar/personalcenter/%5BF42UEF%28D%28YICPPQT%5B9%29513.png'
  },
  {
    label: '宝贝上首页',
    icon: 'http://localhost:80/qunar/personalcenter/Z%25JF%7ETDI144Y%29V6%24ICHW%29%7EN.png'
  },
  {
    label: '闲鱼公约',
    icon: '/icons/FC7PQOAC@X0@W}TO(C(@D4A.png'
  },
  {
    label: '闲鱼体验官',
    icon: 'http://localhost:80/qunar/personalcenter/L2A%28FI_8KV%2954OA%283C07DGG.png'
  },
  {
    label: '宝贝估价',
    icon: 'http://localhost:80/qunar/personalcenter/GUT408C1602I973JRYT0%24%28R.png'
  },
  {
    label: '安全中心',
    icon: '/icons/VB(JUO`IXBES]9]}LGA)Z`0.png'
  },
  {
    label: '我的帖子',
    icon: 'http://localhost:80/qunar/personalcenter/6SN1%244%5D%60%40UP6WID%5DN6R9VMG.png'
  }
]);

const scrollRef = ref<HTMLElement | null>(null);
const itemsRef = ref<HTMLElement | null>(null);
const currentIndex = ref(0);

// 初始化滚动和指示器
const init = () => {
  nextTick(() => {
    if (itemsRef.value) {
      const itemWidth = itemsRef.value.firstElementChild?.offsetWidth || 0;
      const totalWidth = navList.length * itemWidth;
      itemsRef.value.style.width = `${totalWidth}px`;
    }
  });
};

// 跳转到指定索引
const goTo = (index: number) => {
  currentIndex.value = index;
  if (itemsRef.value) {
    itemsRef.value.scrollTo({
      left: index * (itemsRef.value.firstElementChild?.offsetWidth || 0),
      behavior: 'smooth'
    });
  }
};

onMounted(() => {
  init();
});
</script>

<style scoped>
.icon-nav {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 10px 0;
}

.nav-scroll {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-items {
  display: inline-flex;
  gap: 20px;
}

.nav-item {
  text-align: center;
  min-width: 100px;
  cursor: pointer;
  transition: transform 0.2s;
}

.nav-item:hover {
  transform: scale(1.05);
}

.icon {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}

.label {
  font-size: 14px;
  color: #333;
}

.indicator {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}

.indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
}

.indicator span.active {
  background: #ffd700;
  width: 20px;
  border-radius: 4px;
}

/* 隐藏滚动条 */
.nav-scroll::-webkit-scrollbar {
  display: none;
}
</style>